import React from 'react'
import fetchJsonp from 'fetch-jsonp'

import { Button, Spin, Alert } from 'antd';
import style from '../../css/MovieDetail.scss'

export default class MovieDetail extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      id: props.match.params.id,
      detailData: {},
      isLoading: true
    }
  }
  componentWillMount(){
    const url = `https://api.douban.com/v2/movie/subject/${this.state.id}?apikey=0df993c66c0c636e29ecbb5344252a4a`
    fetchJsonp(url)
      .then(response => response.json())
      .then(data => {
        this.setState({
          detailData: data,
          isLoading: false
        })
      })
    
    // const data = require('../test_data/detail.json')
    // this.setState({
    //   detailData: data
    // })
  }
  render() {
    return <div>
      {this.isLoad()}
    </div>
  }
  
  goBack = () => {
    this.props.history.goBack(-1)
  }
  
  isLoad = () => {
    if(this.state.isLoading){
      return <Spin tip="Loading...">
        <Alert
          message="Alert message title"
          description="Further details about the context of this alert."
          type="info"
        />
      </Spin>
    }else{
      return <div>
        <Button type="primary" onClick={this.goBack}>&lt; 返回电影列表页面</Button>
        <div className={style.box}>
          <h1>{this.state.detailData.title}</h1>
          <div className={style.img}>
            <img src={this.state.detailData.images.small} alt="封面图片"/>
          </div>
          <p>
            {this.state.detailData.summary}
          </p>
        </div>
      </div>
    }
  }
}
